


Repository

by phantomdare1 (gadaursan)



Category: Original Work
Genre: Other
Language: English
Status: In-Progress
Published: 2016-11-23
Updated: 2017-03-04
Packaged: 2018-09-01 16:38:41
Rating: Not Rated
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 7
Words: 2,664
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/8631214
Author URL: https://archiveofourown.org/users/gadaursan/pseuds/phantomdare1
Summary: Primarily just where I share work skin code and experiment.





	1. Android 6.0 Messaging

**Author's Note:**

> This isn't a new fic. This is just my test bed where I attempt to experiment with work skins.

IOS Texting:

 

Max  
  
A: Hello, friend.  
  
B: Hello to you, too.  
  
A: Should we get dinner?  
  
A: My treat.  
  
B: Sure. Tell me when.

Android Texting:

 

Viktor Nikiforov

  1. A: 

Hello, friend.

2 min

  2. B: 

Hello to you, too.

1 min

  3. A: 

Should we get dinner? We can go to that Chinese place you like so much.

1 min

  4. A: 

My treat.

1 min

  5. B: 

Sure. Tell me when.

Now





	2. Android 6.0 CSS file

**Notes for the Chapter:**

> Technically, this is only part of the full code I used for Chapter 1. The other half of the code, namely the iOS code can be found with detailed specifications by [How to Make iOS Text Messages on AO3 by CodenameCarrot and La_Temperanza](http://archiveofourown.org/works/6434845/chapters/14729722). A word of caution: this code isn't stable by AO3 standards, meaning that if you use this and follow the way I styled the HTML in Chapter 1 (use Inspect Source), and constantly go back to AO3's editing page to change your HTML, AO3 will break the HTML. I highly suggest you edit this in a separate IDE and paste it onto AO3 when you're ready.
    
    
    .hide {
        display: none;
    }
    
    /* ANDROID 6.0*/
    .phoneAND {
        width: 300px;
        font-family: "Roboto", "Noto", Arial, sans-serif;
        margin: 20px auto;
    }
    
    .headerAND {
        background-color: #1993E6;
        color: #FFFFFF;
        width: 300px;
        font-size: large;
        padding: .5em 0 .5em .5em;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        
        text-align: left;
        text-transform: capitalize;
        line-height: 30px;
        display: table;
        box-shadow: 0 7px 10px -3px #aaa;
    }
    
    .messagebodyAND {
        list-style: none;
        background-color: #EFEDEB;
        margin: 0;
        padding: 0 0 .5em 0;
    }
    
    .messagebodyAND li {
        padding: .5em;
        overflow: hidden;
        display: flex;
    }
    /*
    .textAND {
        display: inline-block;
        width: 200px;
        text-align: left;
        color: #FFFFFF;
        margin: .5em 0 0.5em;
        border-radius: .2em;
        padding: 0.5em 1em;
        background: #1993E6;
        max-width: 75%;
        clear: both;
        position: relative;
        left: -2.5em;
    }
    
    .textAND::after {
        content: "";
        position: absolute;
        left: -1em;
        top: 0;
        width: 1em;
        height: .5em;
        border-top: 1em solid #1993E6;
        border-left: 1em solid transparent;
    }
    
    .textIconAND {
        position: relative;
        top: .5em;
        left: -2em;
        width: 50px;
        height: auto;
        border-radius: 50%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    
    .replyAND {
        display: inline-block;
        width: 200px;
        text-align: left;
        color: #000000;
        margin: .5em 0 0.5em;
        border-radius: .2em;
        padding: 0.5em 1em;
        background: #FEFEFE;
        max-width: 75%;
        clear: both;
        position: relative;
        right: -2.5em;
    }
    
    .replyAND::after {
        content: "";
        position: absolute;
        top: 0;
        right: -1em;
        width: 1em;
        height: .5em;
        border-top: 1em solid #FEFEFE;
        border-right: 1em solid transparent;
    }
    
    .replyIconAND {
        position:relative;
        top: .3em;
        right: -2em;
        width: 50px;
        height: auto;
        border-radius: 50%;
        padding-left: 20px;
        padding-right: 20px;
    }
    */
    
    .iconWrapperAND {
        display: block;
        width: 40px;
        position: relative;
    }
    
    .iconWrapperAND img{
        width: 40px;
        height: auto;
        border-radius: 50%;
    }
    
    .textAND {
        width: 200px;
        background: #1993E6;
        color: #FFFFFF;
        padding: .5em;
        border-radius: .2em;
    }
    
    .textAND p {
        margin: 0 0 .2em 0;
    }
    
    .textIconAND::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-right: 5px solid #1993E6;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }
    
    .replyWrapperAND {
    }
    
    .replyAND {
        width: 200px;
        background: #FEFEFE;
        color: #000000;
        padding: .5em;
        border-radius: .2em;
    }
    
    .replyAND p {
        margin: 0 0 .2em 0;
    }
    
    .replyWrapperAND .replyIconAND{
    }
    
    .replyIconAND::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-right: 1em solid #FEFEFE;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }
    
    .timestampAND {
        font-size: smaller;
        opacity: 0.5;
    }
    


	3. Twitter Mockup

**Summary for the Chapter:**

> A test run of mobile-based embedded Tweets.

**Notes for the Chapter:**

> An beginning note to check if my stuff doesn't play hopscotch.

Since a lot of fic writers like to involve social media in their fics, why not do it with some style and flair than just a few lines of text? Technically, you could make an actual embedded Tweet, but it wouldn't be formatted the way we like it, so let's try this with some work skins. The code on this page provides several examples and options you can do with tweets.

## Capturing a picture of a Tweet

The easiest method to "embed" tweets is to use a tweet generator, save the pic, then upload them to any image hosting site of your choice.

Your HTML should look like this:
    
    
    <p align="center"><img class="twEasy" src="http://imgur.com/Yll9hGE.png" alt="Example of Image Tweet" width="760" height="288" /></p>

The corresponding CSS should look like this:
    
    
    .twEasy{  
    
    max-width: 300px;  
    
    height: auto;  
    
    }

The pros of this is that it's super duper easy to implement, but the cons is that you may not have crisp lines that you'd get from formatting. You also can't highlight text. If you're not comfortable with spending a bunch of time fiddling with HTML, then you can use this.

## Text-Only Tweets

Now say you want to do this Tweet thing with higlightable text. So you want something like this.

Kayden Orona   
@kayorona   
@jayorona Wish you were here with us in #France. We miss you, Jaya.(Purple Heart ) 3:09 PM - 5 May 2014  2,144  2,901 

The full CSS code can be found in the following entry, but the HTML used for this is as follows:
    
    
    <div class="tw">  
    
    <p class="twBody">  
    
    <span>  
    
    <img class="twAvatar" src="http://imgur.com/tzkpXGS.png">  
    
    <span class="twUser">  
    
    <span class="twUserName">Kayden Orona  
    
    <img class="twIcon" src="http://imgur.com/eVQzzhT.png">  
    
    </span>  
    
    <br>  
    
    <span class="twUserHandle">@kayorona</span>  
    
    </span>  
    
    <img class="twFollow" src="http://imgur.com/p6lbN22.png">  
    
    <br>  
    
    </span>  
    
    <span class="twText">  
    
    <a class="twLink">@jayorona</a> Wish you were here with us at  
    
    <a class="twLink">#France</a>. We miss you.  
    
    </span>  
    
    <span class="twTimeStamp">  
    
    3:09 PM - 5 May 2014  
    
    </span>  
    
    <span>  
    
    <img class="twReplyIcon" src="http://imgur.com/9dwkilY.png">  
    
    <span class="twRetweet">  
    
    <img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png">  
    
    2,144  
    
    </span>  
    
    <span class ="twLike">  
    
    <img class="twHeartIcon" src="http://imgur.com/67stmhs.png">  
    
    2,901  
    
    </span>  
    
    </span>  
    
    </p>  
    
    </div>

As you can see, there are some icons required to load some of these things, most of I which I made myself for you to use. Here's a list of the links.

  * [Twitter Icon](http://imgur.com/p6lbN22)
  * [Like Button](http://imgur.com/67stmhs)
  * [Reply Icon](http://imgur.com/9dwkilY)
  * [Retweet Button](http://imgur.com/ToOoCJzs)
  * [Verified User Icon](http://imgur.com/eVQzzhT)



The avatar is just a sample one, so feel free to use your own. Be sure to make the avatar square shaped, because the code won't truncate it for you. All Twitter avatars get resized to 40px wide, so keep that in mind.

Essentially, you don't touch the tags, just edit the text as you see fit. If you need to make links, just make links like you usually do in HTML. I've been unable to remove the decorative line underneath it, but using spans breaks the HTML, and AO3 refuses to let me remove it. So... it's a little less authentic.

## Single Image Tweets

Now, how about if you want to attach an image to your tweet? This isn't much different from your original text-only tweet. You just need to make sure you tag the img tag with "twImage"

Kayden Orona   
@kayorona   
@jayorona Wish you were here with us in #France. We miss you, Jaya.(Purple Heart ) 3:09 PM - 5 May 2014  2,144  2,901 

The maximum width of these simulated tweets are 300px wide, so if you don't want your picture to be blown up, try to stay above that width. Don't worry about making your pictures too big, because tagging it as "twImage" should fit the image in the div container. 

HTML:
    
    
    <div class="tw">  
    
    <p class="twBody">  
    
    <img class="twImage" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/French_Formal_Garden_in_Loire_Valley.jpg">  
    
    <span>  
    
    <img class="twAvatar" src="http://imgur.com/tzkpXGS.png">  
    
    <span class="twUser">  
    
    <span class="twUserName">Kayden Orona  
    
    <img class="twIcon" src="http://imgur.com/eVQzzhT.png">  
    
    </span>  
    
    <br>  
    
    <span class="twUserHandle">@kayorona</span>  
    
    </span>  
    
    <img class="twFollow" src="http://imgur.com/p6lbN22.png">  
    
    <br>  
    
    </span>  
    
    <span class="twText">  
    
    <a class="twLink">@jayorona</a> Wish you were here with us at  
    
    <a class="twLink">#France</a>. We miss you.  
    
    </span>  
    
    <span class="twTimeStamp">  
    
    3:09 PM - 5 May 2014  
    
    </span>  
    
    <span>  
    
    <img class="twReplyIcon" src="http://imgur.com/9dwkilY.png">  
    
    <span class="twRetweet">  
    
    <img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png">  
    
    2,144  
    
    </span>  
    
    <span class ="twLike">  
    
    <img class="twHeartIcon" src="http://imgur.com/67stmhs.png">  
    
    2,901  
    
    </span>  
    
    </span>  
    
    </p>  
    
    </div>

Anyways, this is all for today. Once again, CSS is attached on the next chapter for you to look at for yourself. I could have went the full mile and add hover effects (changing colors), but I think that would detract from the fact that I just made this to make fictional tweets look nice on this site.

## Emoji Implementation

It's not a Tweet unless you can add emojis!(Smiling Face With Open Mouth And Smiling Eyes )

Thankfully, someone's already done work for that! For full documentation, see [All the Emoji by CodenameCarrot](http://archiveofourown.org/works/6580324/chapters/15055576). It's really easy to implement, and is non-intrusive to the tweet structure. Another advantage to formatted Tweets instead of images is that they're easy to change. All you gotta do is go the editing chapter and fix a few things. Or you could just copy and paste from your IDE like I do. Either way, less steps! (Winking Face )

**Notes for the Chapter:**

> An endnote to check if my stuff doesn't play hopscotch.


	4. Twitter Mockup CSS Code


    /*If you still want to use image formatted tweets. Don't feel bad.*/
    .twEasy{
        max-width: 300px;
        height: auto;
    }
    
    /*The Fun Stuff*/
    .tw {
        max-width: 300px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        display: table;
        margin: auto;
    }
    
    .twBody {
        overflow: hidden;
        background-color: #ffffff;
        border-style: solid;
        border-width: .1em;
        border-color: #dddddd;
        border-radius: .3em;
        float: left;
        min-width: 100%;
        position:relative;
        padding: 1em;
        margin-left: -1em;
    }
    
    /* Images */
    .twImage{
        width: 111%;
        height: auto;
        margin: -1em 0em 1em -1em;
    }
    
    .twAvatar {
        width: 40px;
        height: auto;
        float: left;
        margin: 0em 0.3em .3em 0em;
        border-radius: 5px;
    }
    
    .twIcon {
        width: 17px;
        height: auto;
    }
    
    .twFollow {
        position:relative;
        top: -1.7em;
        width: 17px;
        height: auto;
        display: inline-block;
        float: right;
        color: #5EA9DD;
    }
    
    .twReplyIcon {
        width: 17px;
        height: auto;
    }
    
    .twRetweetIcon {
        width: 22px;
        height: auto;
        margin-right: .1em;
    }
    
    .twHeartIcon {
        width: 13px;
        height: auto;
        margin-right: .1em;
    }
    
    /* Text */
    
    .twUserName {
        position: relative;
        top: -.2em;
        font-size: 18px;
        font-weight: 500;
    }
    
    .twUserHandle {
        position: relative;
        top: -.5em;
        font-size: 16px;
        font-weight: 300;
        color: #697882;
    }
    
    .twText {
        display: inline-block;
    }
    
    .twTimeStamp {
        display: inline-block;
        font-size: 14px;
        width: 100%;
        font-weight: 300;
        color: #697882;
        padding: .5em 0em .5em 0em;
    }
    
    .twRetweet {
        font-size: 14px;
        color: #697882;
        margin: 1em 1em 1em 1em;
    }
    
    .twLike {
        font-size: 14px;
        color: #697882;
    
    }
    
    .twLink{
        color: #2C7BB8;
        text-decoration: none;
    }
    


	5. Fire Emblem Support Scripting

**Summary for the Chapter:**

> formatting and CSS to format screenplay and scripts specifically for Fire Emblem. This skin is implemented in my fic As Dark Comes the Night

**Notes for the Chapter:**

> A fairly minor addition. Someone had asked me to share the code for this a year ago, so I should just put it all here instead of putting it on some random pastebin.

I made this skin because I needed to make scripting easier, since I didn't want to format every single cell individually.

Firstly, the script is made through a table, so it's a little extra work to put together. But, you can easily put a table through word processor of your choice. In this case, I used Word. We start with a simple script like this:
    
    
    Niles: This is the first time I've seen you wear boots.
    Anri: They're uncomfortable, but if it's for the sake of keeping my cover, I'll wear them.
    Niles: Hmm, ever wore heels before?
    Anri: I have. They aren't the most pleasant of memories.
    Niles: A shame, then.
        

I use Word's feature of converting text into a table, splitting the cells by the colon, then with a bit of tweaking (ie adding images and removing extra characters), we get a table like this:
    
    
    <table>  
        <tbody>  
        <tr>  
            <td><img src="http://imgur.com/STYEtz8.png" alt="Niles" width="128" height="128" /></td>  
            <td>This is the first time I've seen you wear boots.</td>  
        </tr>  
        <tr>  
            <td><img src="http://imgur.com/ZJOMCNG.png" alt="Anri" width="128" height="128" /></td>  
            <td>They're uncomfortable, but if it's for the sake of keeping my cover, I'll wear them.</td>  
        </tr>  
        <tr>  
            <td><img src="http://imgur.com/STYEtz8.png" alt="Niles" width="128" height="128" /></td>  
            <td>Hmm, ever wore heels before?</td>  
        </tr>  
        <tr>  
            <td><img src="http://imgur.com/bQQi2yY.png" alt="Anri" width="128" height="128" /></td>  
            <td>I have. They aren't the most pleasant of memories.</td>  
        </tr>  
        <tr>  
            <td><img src="http://imgur.com/tmoSITI.png" alt="Niles" width="128" height="128" /></td>  
            <td>A shame, then.</td>  
        </tr>  
        </tbody>  
    </table>

We then put together the CSS to make the table pretty. This means fitting the first column to huge the sides of the sprite image and centering text to align center vertically.
    
    
    td {
        vertical-align: middle;
    }
    
    td:nth-child(1) {
        width: 128px;
    }
        

So, the end result is this:

| This is the first time I've seen you wear boots.  
---|---  
| They're uncomfortable, but if it's for the sake of keeping my cover, I'll wear them.  
| Hmm, ever wore heels before?  
| I have. They aren't the most pleasant of memories.  
| A shame, then.  
  
An additional feature of the code is to format stage directions, which can look a little different from normal speaking text.
    
    
    .stagedir {
      text-align: center;
      font-style: italic;
    }
        

Say we have a script that looks like this.
    
    
    <tbody>  
    <table>  
    <td><img src="http://imgur.com/NeJLquH.png" alt="Takumi" width="128" height="128" /></td>  
    <td>I've waited. For a long time, perhaps much like you. I've waited for things to turn back to normal again, but that time never came.</td>  
    </tr>  
    <tr>  
        <td><img src="http://imgur.com/fftPEV3.png" alt="Elise" width="128" height="128" /></td>  
        <td>I don't know what you're wishing for, but I'm sure you will get what you want someday.</td>  
    </tr>  
    <tr>  
        <td><img src="http://imgur.com/qqSzY4X.png" alt="Takumi" width="128" height="128" /></td>  
        <td>… F-Forget all the nonsense I just said.</td>  
    </tr>  
    <tr>  
        <td> </td>  
        <td class="stagedir">(Takumi quickly leaves, and shuts the door behind him.)</td>  
    </tr>  
    <tr>  
        <td><img src="http://imgur.com/FylhaCy.png" alt="Elise" width="128" height="128" /></td>  
        <td>… Why should I...?</td>  
    </tr>  
    </tbody>  
    </table>

Note there is a row tagged with the class "stagedir". With the added CSS script, the script with stage directions will look like this:

| I've waited. For a long time, perhaps much like you. I've waited for things to turn back to normal again, but that time never came.  
---|---  
| I don't know what you're wishing for, but I'm sure you will get what you want someday.  
| … F-Forget all the nonsense I just said.  
  | (Takumi quickly leaves, and shuts the door behind him.)  
| … Why should I...?  
  
And that's all, really. I hope this will be useful for anyone who considers writing fics in the same format.


	6. Instagram: Documentation

**Summary for the Chapter:**

> Instagram posts with highlightable text for your fics.

We continue our series of social media mockups, this time with Instagram! This is not quite like the official embedded Instagram post, but more like the mobile version of an Instagram app, mostly because I think that's the format people are most familiar with. For an easy way to post an Instagram post (i.e. capture the instagram post and posting it as a picture), refer to a previous chapter on the Twitter mockup. As for the nitty gritty version, let's take a look.

kayorona **200** likes  
**kayorona** Wish you were here with us in #France. We miss you, Jaya. (Purple Heart ) View all 28 comments May 5, 2014

This is currently the only look I've got so far. It's pretty close to the actual standard, and is essentially just a retool of my Twitter mockup. I will attach the full CSS code in a following chapter. So the HTML for this is pasted below. For those who just want to know which fields to change, I have bolded those places.
    
    
    <div class="inst">  
    
    <p class="instBody">  
    
    <span>  
    
    **< img class="instAvatar" src="http://imgur.com/tzkpXGS.png">**  
    
    ** <span class="instUser">kayorona</span>**  
    
    </span>  
    
    **< img class="instImage" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/French_Formal_Garden_in_Loire_Valley.jpg">**  
    
    <img class="instIcon" src="http://imgur.com/XcdMBeP.png">  
    
    <img class="instIcon" src="http://imgur.com/gB6K2qR.png">  
    
    <img class="instIcon" src="http://imgur.com/d7ItqK3.png">  
    
    <img class="instIconRight" src="http://imgur.com/ccdl7jh.png">  
    
    <span class="instText">  
    
    <img class="instHeart" src="http://imgur.com/stCkCdV.png"> **< b>200</b>** likes</br>  
    
    **< b>jayorona</b> Wish you were here with us in**  
    
    ** <a class="instLink">#France</a>. We miss you, Jaya.<span class="x1F49C"><span class="hide">(Purple Heart )**</span></span>  
    
    </span>  
    
    ** <span class="instComments">View all 28 comments</span>**  
    
    ** <span class="instTimestamp">May 5, 2014</span>**  
    
    </p>  
    
    </div>

It's a lot more simple than the Twitter one, (less icons and less fancy stuff floating around). I hope this code will help people make polished pretty Instagram posts in their fics in the future.


	7. Instagram: CSS Code

**Summary for the Chapter:**

> A dump of the CSS Code for the Instagram post.
    
    
    .inst {
    
    
        max-width: 300px;  
    
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
    
    display: table;  
    
    margin: auto;  
    
    }  
    
      
    
    .instBody {  
    
    overflow: hidden;  
    
    background-color: #ffffff;  
    
    border-style: solid;  
    
    border-width: .1em;  
    
    border-color: #dddddd;  
    
    border-radius: .3em;  
    
    float: left;  
    
    min-width: 100%;  
    
    position:relative;  
    
    padding: .7em;  
    
    margin-left: -1em;  
    
    }  
    
      
    
    /* Images */  
    
    .instImage{  
    
    width: 111%;  
    
    height: auto;  
    
    margin: 0em -1em 0em -1em;  
    
    }  
    
      
    
    .instAvatar {  
    
    width: 30px;  
    
    height: auto;  
    
    float: left;  
    
    margin: 0em 0.3em .5em -.1em;  
    
    border-style: solid;  
    
    border-width: .1em;  
    
    border-color: #dddddd;  
    
    border-radius: 50%;  
    
    }  
    
      
    
    .instIcon {  
    
    height: 20px;  
    
    width: auto;  
    
    margin: 0.3em 0.3em 0.1em 0em;  
    
    }  
    
      
    
    .instIconRight {  
    
    height: 20px;  
    
    width: auto;  
    
    float: right;  
    
    margin: 0.3em 0.3em 0.1em 0em;  
    
    }  
    
      
    
    /*Text*/  
    
      
    
    .instUser {  
    
    color: #343436;  
    
    position: relative;  
    
    top: .1em;  
    
    font-size: 16px;  
    
    font-weight: bold;  
    
    }  
    
      
    
    .instText {  
    
    border-top:1px solid #ADADAD;  
    
    margin: .1em 0em .1em 0em;  
    
    padding: .1em 0em .1em 0em;  
    
    display: inline-block;  
    
    font-size: 14px;  
    
    }  
    
      
    
    .instLink {  
    
    color: #135588;  
    
    }  
    
      
    
    .instComments {  
    
    display: inline-block;  
    
    width: 100%;  
    
    color: #ADADAD;  
    
    font-size: 14px;  
    
    }  
    
      
    
    .instTimestamp {  
    
    display: inline-block;  
    
    width: 100%;  
    
    color: #ADADAD;  
    
    text-transform: uppercase;  
    
    font-size: 12px;  
    
    }


End file.
